<template>
  <div class="app-container">

		<div class="filter-container">

      <el-select v-model="query.business_type" class="filter-item"  placeholder="请选择">
        <el-option  label="全部" value="0"></el-option>
        <el-option v-for="item in businessType" :key="item.k" :label="item.v" :value="item.k"></el-option>
      </el-select>
      <el-select filterable v-model="query.type_id" class="filter-item"  placeholder="请选择">
        <el-option  label="全部" value="0"></el-option>
        <el-option v-for="item in mapType" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-cascader  class="filter-item"
        v-model="query.area"
        :options="treeArea"
        :props="{ expandTrigger: 'hover',value: 'id',label:'name' }"
      ></el-cascader>

			<el-input  style="width: 200px;"   v-model="query.name" placeholder="设备名称" class="filter-item"  ></el-input>
			<el-input  style="width: 200px;"   v-model="query.code" placeholder="编码" class="filter-item"  ></el-input>

			<!--
			<el-select v-model="type" class="filter-item"  placeholder="请选择">
					<el-option v-for="item in mapType" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>

			 <el-date-picker class="filter-item"
        v-model="query.startDate"
        type="date"
        placeholder=""
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>

      <el-date-picker class="filter-item"
        v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="录入开始日期"
        end-placeholder="录入结束日期">
      </el-date-picker>


			-->
      <br/>
			<el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="showAdd()" type="primary" class="filter-item">新增</el-button>
      <el-button @click="handleDelete()" type="primary" class="filter-item">删除</el-button>
      <el-button @click="download" type="primary" class="filter-item">导出</el-button>

      <el-button style="margin-left: 10px" @click="getRecords" type="danger" class="filter-item">刷新</el-button>
		</div>

		<el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row
              @selection-change="handleSelectionChange"
              v-horizontal-scroll="'always'">
			 <el-table-column type="selection" width="55" />
			<el-table-column fixed="left" prop="id" label="ID" min-width="50" />

			<el-table-column prop="get_type.business_name" label="业务类型" min-width="120" />
			<el-table-column prop="get_type.name" label="设备种类" min-width="120" />
			<el-table-column prop="code" label="编码" min-width="120" />
			<el-table-column prop="name" label="名称" min-width="120" />
			<el-table-column prop="coal" label="矿场" min-width="100" />
			<el-table-column prop="region" label="区域" min-width="100" />
			<el-table-column prop="local" label="位置" min-width="100" />
      <el-table-column prop="busy" label="状态" min-width="50" />
      <el-table-column show-overflow-tooltip prop="beizhu" label="备注" min-width="200" />
			<el-table-column prop="created_at" label="创建时间" min-width="160" />
			<el-table-column prop="status" label="禁用/启用" min-width="80" >
				<template slot-scope="scope">
						<el-switch	v-model="scope.row.status"	active-color="#409EFF"	inactive-color="#909399"
							:active-value="1"	:inactive-value="2"		@change="changeStatus(scope.row)">
						</el-switch>
				</template>
		</el-table-column>
			<el-table-column fixed="right" label="操作" min-width="170">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="showLog(scope.$index, scope.row)">使用记录</el-button>
					<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="text" @click="handleQr(scope.$index, scope.row)">下载二维码</el-button>
<!--					<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
				</template>
			</el-table-column>
		</el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 50, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="isAdd?'新增':'编辑'" :visible.sync="addDialogFormVisible">
      <el-form :model="form">
        <el-form-item label="地点" label-width="120px" >
          <el-cascader
            v-model="form.area"
            :options="treeArea"
            :props="{ expandTrigger: 'hover',value: 'id',label:'name' }"
           ></el-cascader>
        </el-form-item>

        <el-form-item label="类型" label-width="120px" >
          <el-select filterable v-model="form.type_id" placeholder="请选择">
            <el-option v-for="item in mapType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="width: 70%" label="名称" label-width="120px">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item  style="width: 70%" label="备注" label-width="120px">
          <el-input :rows="5" type="textarea" v-model="form.beizhu" ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

<!--    添加log-->
    <el-dialog width="80%" title="使用记录" :visible.sync="logDialogFormVisible">

      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="oper_type_name" label="操作" width="50"></el-table-column>
        <el-table-column prop="date" label="日期" width="100"></el-table-column>
        <el-table-column prop="people" label="负责人" width="100"></el-table-column>
        <el-table-column prop="coal" label="矿场"></el-table-column>
        <el-table-column prop="region" label="区域"></el-table-column>
        <el-table-column prop="local" label="地点"></el-table-column>
        <el-table-column prop="beizhu" label="备注"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="70">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDeleteLog(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-divider content-position="center">添加使用记录</el-divider>

      <el-form :model="logForm">
        <el-form-item label="操作类型" label-width="120px">
          <el-select v-model="logForm.oper_type" placeholder="操作类型">
            <el-option label="安装" value="1"></el-option>
            <el-option label="回收" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地点" label-width="120px" >
          <el-cascader
            v-model="logForm.area"
            :options="treeArea"
            :props="{ expandTrigger: 'hover',value: 'id',label:'name' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="时间" label-width="120px" >
          <el-date-picker class="filter-item"
            v-model="logForm.date"
            type="date"
            placeholder=""
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item style="width: 70%" label="负责人" label-width="120px">
          <el-input v-model="logForm.people" ></el-input>
        </el-form-item>

        <el-form-item  style="width: 70%" label="备注" label-width="120px">
          <el-input :rows="5" type="textarea" v-model="logForm.beizhu" ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLog">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost,exportXls } from '@/utils/myUtils'
import {getToken} from "@/utils/auth";

const urlLogLst = '/guard/dev/log/lst';
const urlLogAdd = '/guard/dev/log/add';
const urlLogDel = '/guard/dev/log/del';

const urlUserLst = '/guard/dev/lst';
const urlAddUser = '/guard/dev/add';
const urlGetUser = '/guard/dev/detail';
const urlChange = '/guard/dev/change';
const urlDeleteUser = '/guard/dev/del';

const urlGetArea = '/guard/area/lst';

const urlGetType = '/guard/dev/type/lst';
const urlGetBusiness = '/guard/dev/type/business';

const urlQr = '/guard/dev/getQr';
const urlDownloadUser = '/guard/download';
export default {

    data() {
        return {
          token:"",
					host:process.env.VUE_APP_HOST,
					isAdd:true,
					addDialogFormVisible:false,
					logDialogFormVisible:false,
          businessType:[],
					mapType:[],
          treeArea:[],
          selectId:[],
          query:{
            business_type:'0',
            type_id:'0',
            code:'',
						name:'',
            area:[]
					},
          form:{
            id:0,
						name:'',
            area:[],
            type_id:'',
            beizhu:''
					},
          logForm:{
            id:0,
            oper_type:'1',
            dev_id:'',
            area:[],
            date:'',
            people:'',
            beizhu:''
          },
					pagination:{
						total:0,
						page:1,
						pageSize:50,
					},
					list: [],
          tableData:[],
					formLoading:false,
					listLoading: true
        }
    },
    methods: {

      handleDeleteLog(index, row){
        myGet(urlLogDel,{id:row.id}).then(res=>{
          if(res.status){
            this.logDialogFormVisible = false
            this.getRecords()
          }
        })
      },

      tableRowClassName({row, rowIndex}) {
        if (row.oper_type === 1) {
          return 'warning-row';
        } else if (row.oper_type === 2) {
          return 'success-row';
        }
        return '';
      },

      showLog(index, row){
        Object.assign(this.$data.logForm,this.$options.data().logForm)
        this.logForm.dev_id = row.id
        this.tableData = []
        row.get_log.forEach(item=>{
          this.tableData.push(item)
        })
        this.logDialogFormVisible = true
      },

      addLog(){
        this.logDialogFormVisible = true;
        myPost(urlLogAdd,this.logForm).then(res=>{
          if(res.status){
            this.logDialogFormVisible = false;
            this.$message.success(res.msg);
            this.getRecords()
          }
        })
      },

      showAdd(){
        Object.assign(this.$data.form,this.$options.data().form)
        this.isAdd = true
        this.addDialogFormVisible = true
      },

      getArea(){
        this.treeArea = []
        myGet(urlGetArea,{tree:1}).then(res=>{
          this.treeArea = res.data.records
        })
      },
      getType(){
        this.mapType = []
        myGet(urlGetType,{all:1}).then(res=>{
          this.mapType = res.data.records
        })
      },

      getBusiness(){
        myGet(urlGetBusiness).then(res=>{
          if(res.status){
            this.businessType = res.data.records
          }
        })
      },


      onSubmit(){
        this.addDialogFormVisible = true;
        this.isAdd = true
        myPost(urlAddUser,this.form).then(res=>{
          if(res.status){
            this.addDialogFormVisible = false;
            this.$message.success(res.msg);
            this.getRecords()
          }
        })
      },

      handleQr(index, row){
        const url = this.host+urlQr+"?id="+row.id
        exportXls(url);
      },

      download(){
        const url = this.host+urlDownloadUser+"?downloadType=dev"
        exportXls(url);
      },

      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },
			getRecords(){
        this.listLoading = true;
        let params = Object.assign(this.query,this.pagination)
					myGet(urlUserLst,params).then((res) =>{
            this.listLoading = false;
            if(res.status){
              this.list = res.data.records
              this.pagination.total = res.data.total
            }
          })
			},
			changeStatus(row){
        myGet(urlChange,{id:row.id, status:row.status}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
          }
        })
			},
			handleEdit(index, row) {
        this.form.id = row.id
        this.form.name = row.name
        this.form.type_id = row.type_id
        this.form.area = []
        row.area.split(',').forEach(id=>{
          this.form.area.push(parseInt(id))
        })
        this.isAdd = false
        this.addDialogFormVisible = true
			},

      handleDelete(){
        if(this.selectId.length<=0){
          this.$message.error('请先选择项目！')
          return;
        }
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const id = this.selectId
          myGet(urlDeleteUser,{id}).then(res=>{
            if(res.status){
              this.$message.success(res.msg)
              this.getRecords()
            }
          })
        });
      },

      handleSelectionChange(val) {
        this.selectId = [];
        val.forEach(item=>{
          this.selectId.push(item.id)
        })
      },

			handleSizeChange(val) {
					this.pagination.pageSize = val
					this.pagination.page = 1
					this.getRecords()
			},
			handleCurrentChange(val) {
					this.pagination.page = val
					this.getRecords();
			},
			//多选
			toggleSelection(rows) {
					if (rows) {
					rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
					});
					} else {
							this.$refs.multipleTable.clearSelection();
					}
			}
    },
    mounted() {
      this.getRecords()
      this.token = getToken()
      this.getArea()
      this.getType()
      this.getBusiness()
    }
}
</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>


